<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	 <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon.png">
	<title>Fixed Top Navbar Example for Bootstrap</title>
	<link href="./css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		#l-map{
			height: 300px;
			width: 100%;
		}
		#r-result,#r-result table{
			width:100%;
		}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IO1RLDWOab7cGGZSIhb9CeVN"></script>
	
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="text-center" style="border-bottom: 1px solid #eee; border-radius:0px; height: 60px; padding-top: 5px; padding-bottom: 5px; /*background-color: #eee;*/">
					
					<a style="color: #27aac8; font-weight: normal; display: block; padding: 3px 0; text-decoration: none; font-size: 25px;">
						旅游路线导航
					</a>
					
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid text-center">
		<div class="row" style="padding-top: 10px; padding-bottom: 10px;">
			<label>起点：</label><input type="text" id="start" size="20" value="南京理工大学4号门" style="width:150px;"/>
			<label>终点：</label><input type="text" id="end" size="20" value="南京理工大学3号门" style="width:150px;"/>
			<button onclick="return getRoute();">查询</button>
		</div>
	</div>
	<div class="container-fluid">
		<div id="l-map"></div>
	</div>
	<div class="container-fluid">
		<div id="r-result"></div>
	</div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;">
	</div>
	
	
	
	<!-- js -->
	<script src="./js/require.js"></script>
    
	<script src="./js/jquery-1.11.0.min.js"></script>
	<!--
    <script src="./js/jquery.min.js"></script>
	-->
	<script src="./js/bootstrap.min.js"></script>
	<script type="text/javascript">
	
		// 百度地图API功能
		function G(id) {
			return document.getElementById(id);
		}
		
		var map = new BMap.Map("l-map");
		//map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置城市和地图级别。
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置城市和地图级别。
		
		var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
		var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		map.addControl(top_right_navigation);
		
		
		var transit = new BMap.DrivingRoute(map, {
			renderOptions: {
				map: map,
				panel: "r-result",
				enableDragging : true //起终点可进行拖拽
			},  
		});
		transit.search("南京理工大学-四号门","南京理工大学-三号门");
		
		function getRoute(){
			var start = document.getElementById("start").value;
			var end = document.getElementById("end").value;
			//alert("!"+start+"!"+end+"!");
			if (start == "" || end == ""){
				alert("输入不能为空!");
			}else{
				transit.search(start, end);
			}
		}
		
		var ac = new BMap.Autocomplete({ //建立一个自动完成的对象
 			"input" : "start"
			,"location" : map
		});
		ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});

		var myValue;
		ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
			var _value = e.item.value;
			myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			//setPlace();
		});
		
		var ac_end = new BMap.Autocomplete({ //建立一个自动完成的对象
 			"input" : "end"
			,"location" : map
		});
		ac_end.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});

		ac_end.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
			var _value = e.item.value;
			var myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			//setPlace();
		});
		/*
		function setPlace(){
			map.clearOverlays();    //清除地图上所有覆盖物
			function myFun(){
				var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMap.Marker(pp));    //添加标注
			}
			var local = new BMap.LocalSearch(map, { //智能搜索
			  onSearchComplete: myFun
			});
			local.search(myValue);
		}
		*/
	</script>
</body>
</html>